<template>
	
	<view class="content" :style="'height:'+scriptHeight+'px'">
		<!-- 正确弹窗 -->
		<view class="tanchuang" v-if="isShow">
			<div class="content">
				<view class="shengli" v-if="isshowSuccess">
					<view class="left">恭喜你挑战成功</view>
					<image src="../../../static/shengli.jpeg"></image>
					<view class="right">即将进入下一局</view>
					</view>
				<view class="text" v-if="showData['jieshi']">解释：{{showData['jieshi']}}</view>
				<view class="text" v-if="showData['source']">出处：{{showData['source']}}</view>
				<view class="button" @click="clickNext">继续挑战</view>
			</div>
			<!-- <div class="close"><image src="../../static/close.png"></image></div> -->
		</view>
		<!-- 错误弹窗 -->
		<view class="tanchuang-error" v-if="isShowError">
			<div class="content">
				<view class="img"><image :src="errorImg"></image></view>
				<view class="text">很遗憾，你这次选错了！不要气馁，继续努力！</view>
				
				<view class="botton-view">
					<view class="button" @click="clickAgain">再来一次</view>
					<view class="button" @click="clickErrNext">下一条</view>
				</view>
				
			</div>
			<!-- <div class="close"><image src="../../static/close.png"></image></div> -->
		</view>
		
		<view class="guan">
			<view class="content">第 {{guan}} 局</view>
			<view class="score">{{score+1}}/{{list.length}}</view>
		</view>
		<view class="question">
			<view class="question-content">
				<view class="label" v-for="(item,index) in showData['question']" :key="index">{{item}}</view>
			</view>
			
		</view>
		<view class="answer">
			<view class="label" @click="clickAnswer(item)" v-for="(item,index) in showData['answer']" :key="index">{{item}}</view>
		</view>
		<view class="shouming">点击上面四个字选择正确答案</view>
		
	</view>
</template>

<script>
	import unils from "../../../unils/utils.js"
	export default {
		data() {
			return {
				'scriptHeight':400,
				'isShow':false,//正确弹窗
				'isShowError':false,//错误弹窗
				'isshowSuccess':false,//闯关成功提示
				'openid':"",
				'list':[],//请求回来的列表
				'showData':'',//当前显示的数据
				'guan':1,//第几关
				'score':0,//第几分
				'userAnswer':'',//用户选择的答案
				'errorImg':'../../../static/ku-girl.jpeg',
			}
		},
		onReady() {
			this.scriptHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad(option) {
			//获取电脑和用户头像
			let gender = uni.getStorageSync('gender');
			if(gender == 1){
				this.errorImg = "../../../static/ku-boy.jpeg"; 
			} else {
				this.errorImg = "../../../static/ku-girl.jpeg";
			}
			//获取用户端存储的是第几关
			this.guan = uni.getStorageSync('chengyu_easy_game_guan');
			if(unils.stringIsEmpty(this.guan)){
				this.guan = 1;
			}
			console.log(option);
			//获取用户登录openid
			let openid = uni.getStorageSync('openid');
			// console.log(openid);
			if(!unils.stringIsEmpty(openid)){
				this.openid = openid;
				this.initData();
			} else {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '为了更好的体验，需要授权登录',
				    success: function (res) {
				        if (res.confirm) {
				            // console.log('用户点击确定2');
							
							var p = unils.authLogin();
							p.then(function(isLogin){
								if(isLogin){
									// that.nickName = uni.getStorageSync('nickName');
									// that.avatar = uni.getStorageSync('avatarUrl');
									that.openid = uni.getStorageSync('openid');
									that.initData();
								} else {
									
								}
							})
							
							
							
				        } else if (res.cancel) {
				            uni.switchTab({
				            	url:'../index/index',
				            })
				        }
				    }
				});
			}
			
		},
		onShareAppMessage(res) {
			console.log('========share========');
		    if (res.from === 'button') {// 来自页面内分享按钮
			  console.log(res);
		      console.log(res.target)
		    }
			// console.log(this.openid);
			let openid = uni.getStorageSync('openid');
			// console.log(openid);
		    return {
		      title: '好玩的成语趣味小游戏，快来挑战吧！',
		      path: '/pages/hudong/chengyu_easy_game/chengyu_easy_game?share_user_id='+openid,
		    }
		  },
		methods: {
			clickAnswer:function(answer){
				
				console.log(answer);
				this.userAnswer = answer;
				this.addData();
				if(answer == this.showData['answerOk']){
					this.score ++;
					this.isShow = true;
				} else {
					this.isShowError = true;
				}
				if(this.score == this.list.length){
					this.guan ++;
					this.isshowSuccess = true;
					console.log('下一局');
					this.initData();
				}
				
			},
			clickNext:function(){
				
				console.log('===================');
				console.log(this.score);
				console.log('===================');
				this.showData = this.list[this.score];
				this.isShow = false;
				this.isShowError = false;
				this.isshowSuccess = false;
			},
			clickErrNext:function(){
				this.score ++;
				this.showData = this.list[this.score];
				this.isShow = false;
				this.isShowError = false;
				this.isshowSuccess = false;
			},
			clickAgain:function(){
				this.showData = this.list[this.score];
				this.isShowError = false;
			},
			initData:function(){
				let that = this;
				uni.request({
					url: that.websiteUrl+'/eg_index',
					data:{
						'guan':that.guan,
						'openid':that.openid,
					},
					method:'POST',
					header: {
						'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					},
					success:(res)=>{
						if(res.data.code == 1){
							that.score = 0;//重置当前这一关为0 
							that.list = res.data.data;
							that.showData = that.list[that.score];
							
							uni.setStorageSync('chengyu_easy_game_guan',that.guan);
							console.log(that.score);
							// that.
						} else {
							
						}
					}
				})
			},
			addData:function(){
				let that = this;
				uni.request({
					url: that.websiteUrl+'/eg_easy_game_add',
					data:{
						'guan':that.guan,
						'score':that.score,
						'openid':that.openid,
						'title':that.showData['title'],
						'answer':that.showData['answerOk'], 
						'cid':that.showData['cid'],
						'user_answer':that.userAnswer,
					},
					method:'POST',
					header: {
						'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					},
				})
			},
		}
	}
</script>

<style lang='scss'>

.content{
	background-color: $uni-scroll-bg-clolr;
	/* display: flex; */
	/* justify-content: center;
	align-items: center;
	flex-direction: column; */
	/* 正确弹窗样式 */
	.tanchuang{
		/* width: 100vw; */
		/* background-color: #007AFF; */
		background-color: rgba($color: #000000, $alpha: 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		.content{
			background-color: #ffffff;
			width: 80%;
			padding: 20px;
			border-radius: 10px;
			.shengli{
				display: flex;
				/* align-items: center; */
				/* justify-content: center; */
				margin-bottom: 10px;
				.left{
					/* background-color: #007AFF; */
					font-size: 20px;
					font-weight: bold;
					color:$uni-primary-color;
					display: flex;
					align-items: center;
					text-align: center;
				}
				.right{
					/* background-color: #007AFF; */
					font-size: 20px;
					font-weight: bold;
					color:$uni-primary-color;
					display: flex;
					align-items: center;
					text-align: center;
				}
				image{
					flex-shrink:0;
					width:100px;
					height:100px;
					border-radius: 50%;
				}
			}
			.text{
				margin-bottom: 5px;
				line-height: 25px;
				/* padding: 0 10px; */
				font-size: 14px;
			}
			
			.button{
				background-color: $uni-primary-color;
				/* border: 1px red solid; */
				width:40%;
				height:40px;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				color:$uni-bg-color;
				font-size: 18px;
				margin-top: 20px;
				border-radius: 20px;
			}
		}
		.close{
			margin-top: 20px;
			image{
				width:50px;
				height:50px;
			}
		}
	}
	/* 错误弹窗样式 */
	.tanchuang-error{
		/* width: 100vw; */
		/* background-color: #007AFF; */
		background-color: rgba($color: #000000, $alpha: 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		.content{
			background-color: #ffffff;
			width: 80%;
			padding: 20px;
			border-radius: 10px;
			
			.text{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 25px 0;
				line-height: 25px;
				/* padding: 0 10px; */
				font-size: 15px;
			}
			.img{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width:100px;
					height:100px;
					border-radius: 50%;
				}
				
			}
			.botton-view{
				display: flex;
				
				.button{
					background-color: $uni-primary-color;
					/* border: 1px red solid; */
					width:40%;
					height:40px;
					margin: 0 auto;
					display: flex;
					justify-content: center;
					align-items: center;
					color:$uni-bg-color;
					font-size: 18px;
					margin-top: 20px;
					border-radius: 20px;
				}
			}
			
		}
		.close{
			margin-top: 20px;
			image{
				width:50px;
				height:50px;
			}
		}
	}
	.guan{
		/* background-image: url(../../static/easygame_chuangguan.png); */
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin-top: 20px; */
		width:80%;
		font-size: 18px;
		/* width:30%; */
		padding-top: 30px;
		margin: 0 auto;
		.content{
			background-color: $uni-primary-color;
			color: $uni-bg-color;
			border-radius: 5px;
			padding:5px 8px;
		}
		.score{
			font-size: 14px;
			color:$uni-primary-color;
			margin-left: 10px;
			margin-bottom: -15px;
			font-weight: bold;
		}
	}
	.question{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
		height:150px;
		/* width:80%; */
		margin: 20px 15px;
		border: 1px red dashed;
		
		.question-content{
			/* background-color: #007AFF; */
			display: flex;
			align-items: center;
			justify-content: center;
			.label{
				font-size: 22px;
				font-weight: bold;
				width:30px;
				height:30px;
				padding: 10px;
				color:$uni-text-color;
			}
		}
	}
	.answer{
		/* background-color: #3F536E; */
		margin: 15px;
		margin-top:35px;
		display: flex;
		justify-content: space-between;
		.label{
			background-color: $uni-primary-color;
			color: $uni-bg-color;
			border-radius: 5px;
			width:50px;
			height:50px;
			font-size: 22px;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
	.shouming{
		font-size: 13px;
		color: $uni-text-color;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}
}
</style>
